<template>
  <div>
    <header>
      <div class="search">
        <i class="icon-sousuo iconfont" @click="toSearch()"></i>
        <input type="search" placeholder="按内容搜索" class="inp2" />
      </div>
    </header>
    <nav>
      <ul>
        <li>综合推荐</li>
        <li>销量</li>
        <li>
          价格
          <img src="../../../assets/img/商品列表 (1).png" alt />
        </li>
        <li>好评度</li>
        <li>店铺</li>
        <li>筛选</li>
        <li>
          <img src="../../../assets/img/商品列表 (2).png" alt="#" />
          筛选
        </li>
      </ul>
    </nav>
    <main>
      <div class="content1">筛选11.11大促销</div>
      <div class="content2" v-for="item in arr" :key="item.id" @click="toDetail(item.id)">
        <img :src="$pre+item.img" alt="#" />
        <div>
          <p v-html="item.goodsname"></p>
          <p>
            <span>￥</span>
            <span>{{item.price}}</span>
            <br />
            <span>￥{{item.market_price}}</span>
          </p>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import { reqList } from "../../../http/api";
export default {
  data() {
    return {
      arr: []
    };
  },
  methods: {
    toSearch() {
      this.$router.push("/search");
    },
    toDetail(id) {
      this.$router.push("/detail?id=" + id);
    }
  },
  mounted() {
    console.log(this.$route.query.id,this.$route.query.type);
    reqList({ cateid: this.$route.query.id, type: this.$route.query.type }).then(req => {
      this.arr = req.data.list.goodData;
    });
  },
};
</script>

<style scoped>
header {
  background-color: #ff6040;
  height: 1rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
header .search {
  margin: 0 auto;
  width: 7.06rem;
  height: 0.6rem;
  border: 2px solid gainsboro;
  border-radius: 6px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: white;
}
header .search .inp2 {
  width: 6.3rem;
  height: 0.6rem;
  font-size: 0.26rem;
}
nav ul {
  height: 0.66rem;
  display: flex;
  justify-content: space-around;
  position: relative;
  overflow: hidden;
  background-color: #ff8679;
  box-shadow: 0px 0.12rem 0.12rem #ffd7d0;
  font-size: 0.28rem;
}
nav ul li {
  color: white;
  line-height: 0.63rem;
}
nav ul li:nth-of-type(3) {
  display: flex;
}
nav ul li:nth-of-type(3) img {
  margin-top: 0.18rem;
  margin-left: 0.1rem;
  width: 0.16rem;
  height: 0.3rem;
}
nav ul li:nth-of-type(7) {
  position: absolute;
  right: 0;
  width: 1.2rem;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  background-color: #ff887d;
  box-shadow: -2px 0px 3px #f76b5d;
  height: 0.66rem;
  font-size: 0.24rem;
}
nav ul li:nth-of-type(7) img {
  width: 0.26rem;
  height: 0.26rem;
}
main .content1 {
  width: 7.08rem;
  height: 0.62rem;
  background-color: #fff4f2;
  color: #ff6d50;
  border: 1px solid #ff6d50;
  border-radius: 4px;
  text-align: center;
  line-height: 0.62rem;
  margin: 0.2rem auto;
  font-size: 0.32rem;
  font-weight: bolder;
}
main .content2 {
  width: 7.1rem;
  display: flex;
  justify-content: space-between;
  margin: 0.2rem auto;
}
main .content2 img {
  width: 2.16rem;
  height: 2.18rem;
}
main .content2 div {
  flex: 1;
  margin: 0.2rem 1rem;
}
main .content2 div p {
  margin: 0.2rem;
}
main .content2 div p:nth-of-type(1) {
  font-size: 0.3rem;
  font-weight: bolder;
}
main .content2 div p:nth-of-type(2) {
  margin: 0.2rem 0 0.1rem;
}
main .content2 div p:nth-of-type(2) span:nth-of-type(1) {
  font-size: 0.16rem;
  color: #f76b5d;
}
main .content2 div p:nth-of-type(2) span:nth-of-type(2) {
  font-size: 0.3rem;
  color: #f76b5d;
  font-weight: bolder;
}
main .content2 div p:nth-of-type(2) span:nth-of-type(3) {
  font-size: 0.16rem;
  text-decoration: line-through;
  color: gray;
}
</style>